<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_监视属性实现</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        computed和watch的区别:
            1.computed能完成的功能，watch都可以完成
            2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
        2个重要的小原则：
            1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
            2.所有不被Vue管理的函数（定时器的回调、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，
              这样this的指向才是vm 或组件实例对象
    -->
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br />
      名：<input type="text" v-model="lastName" /><br />
      姓名：<span>{{fullName}}</span><br />
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
        fullName: "张-三",
      },
      // 计算属性里面不能开启异步任务去维护数据
      watch: {
        firstName(val) {
          // 这里得用箭头函数
          setTimeout(() => {
            this.fullName = val + "-" + this.lastName;
          }, 1000);
        },
        lastName(val) {
          this.fullName = this.firstName + "-" + val;
        },
      },
    });
  </script>
</html>
